"""
@author: 高姚霞
@date: 2020-08-03 17:34:31
"""
<!-- 渠道指数页-站点情绪分布图 -->
<template>
  <div :id="id" :style="{ height:height,width:width }" />
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    getSiteMoodData: {
      type: Function,
      default:() => {}
    }
  },
  data() {
    return {
      chart: null,
      legendData: [],
      data1: [],
      data2: [],
    };
  },
  mounted() {
    this.getlegendData();
    this.getData();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
  },
  methods: {
    getlegendData() {
      if (this.data.length === 0) {
        return;
      }
      this.legendData = [];
      this.data.forEach((item, index) => {
        this.legendData.push(item.name);
      });
    },
    getData() {
      if (this.data.length === 0) {
        return;
      }
      this.data1 = [];
      this.data2 = [];
      this.data.forEach((item, index) => {
        this.data1.push(item.positiveValue);
        this.data2.push(item.negativeValue);
      });
      this.initChart();
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          //   type: "scroll",
          show: true,
          top: "0",
          left: "center",
          textStyle: {
            //图例文字的样式
            fontSize: 14,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 26,
          data: ["正向", "负向"],
        },
        grid: {
          top: "16%", //距上边距
          bottom: "20%", //距离下边距
        },
        xAxis: {
          type: "category",
          data: this.legendData,
          axisLabel: {
            color: "#000",
          },
          axisLine: {
            lineStyle: {
              color: "rgba(213, 213, 213)",
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          min: -400,
          max: 400,
          splitNumber: 8,
          inverse: false,
          splitArea: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#919191",
              width: 0, //这里是为了突出显示加上的
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "正向",
            type: "bar",
            stack: "one",
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: "rgba(0,0,0,0.5)",
              },
            },
            barWidth: "16%",
            data: this.data1,
            label: {
              show: true,
              position: "top",
              offset: [-20, 10],
            },
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 0, 0],
              },
            },
          },
          {
            name: "负向",
            type: "bar",
            stack: "one",
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: "rgba(0,0,0,0.5)",
              },
            },
            data: this.data2,
            label: {
              show: true,
              position: "bottom",
              offset: [24, -20],
            },
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 30, 30],
              },
            },
          },
        ],
        color: ["#FFAD3D", "#99B3C0"],
      };
      this.chart.setOption(option);
    },
  },
  watch: {
    data: {
      handler(newVal, oldVal){
        console.log("监听：", newVal)
        if(this.chart){
          //销毁
          this.chart.dispose();
          if(newVal){
            this.initChart();
          } 
        } else{
          this.initChart();
        }
      },
      deep: true //对象内部属性的监听
    }
  }
};
</script>
<style lang='stylus' scoped></style>
</script>